<template>
    <div class="app-container">
      <Ht-search-form
        :queryParams="queryParams"
        :outputQueryParams="queryParams"
        :formOptions="formOptions"
        :advOptions="[]"
      ></Ht-search-form>
        <ht-table
            ref="dataTable"
            :showSerialNumber="false"
            :dictMap="dictMap"
            :reqConfig="reqConfig"
            :tableBindColumns="tableBindColumns"
            :opButtonList="opButtonList"
            sortType="close"
        >
        </ht-table>
    <edit-node
      ref="editNodeDialog"
      @editComplete="editNodeComplete"
    ></edit-node>

    </div>
</template>
<script>
import { apiUrlConfig,del } from "@/api/cnaps/flowManager/index";
import { listPageMixin } from "@/libs/listPageMixin";
import EditNode from "./components/EditNode.vue";
export default {
  name: "FlowManager",
  components: {
    EditNode
  },
  mixins: [listPageMixin],
  data() {
    return {
      reqConfig: apiUrlConfig,
      queryParams: {
        id: ''
      },
      formOptions: [
        {
          type: "input",
          prop: 'id',
          defaultAttr: {
            label: 'ID',
            placeholder: '请输入ID'
          }
        },
      ],
      opButtonList: () => {
        return [
            {
                label: '新增',
                type: 'primary',
                actionType: 'add',
                clickFun: () => {
                    this.handleAction('add')
                }
            }
        ]
      },
      tableBindColumns: [
        {
          label: "ID",
          prop: "id",
        },
        {
          label: '操作',
          type: 'operate',
          buttonList: (row) => [
            {
              label: '编辑流程',
              doFunc: (rowData) => {
                this.handleAction('editFlow',rowData)
              }
            },
            {
              label: '删除',
              doFunc: (rowData) => {
                this.handleAction('del',rowData)
              }
            }
          ]
        }
      ],
    };
  },
  mounted() {
  },
  methods: {
    handleAction(type,row) {
        switch(type) {
            case 'add':
                this.$prompt('请输入ID', '添加流程', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                }).then(({ value }) => {
                  if(value) {

                    this.$refs.editNodeDialog.show(value,false);
                  } else {
                    this.$message({
                    type: 'success',
                    message: '请输入ID'
                  });
                  }

                }).catch(() => {

                });
                break;
            case 'editFlow':
                this.$refs.editNodeDialog.show(row.id,true);
                break;
            case 'del':
                this.$confirm('确认要删除这个流程吗', '提示', {
                  distinguishCancelAndClose: true,
                  confirmButtonText: '确定',
                  cancelButtonText: '取消'
                })
                  .then(() => {
                    del(row.id).then(res => {
                      this.$message({
                        type: 'success',
                        message: '删除成功'
                      });
                      this.doQuery()
                    })

                  })
                  .catch(action => {

                  });
                break;
        }
    },
    editNodeComplete(state) {
      console.log('editNodeComplete')
        this.doQuery()
    }
  },
};
</script>
